<template>
  <div class="password-strength-bar">
    <div class="strength-meter">
      <div v-for="level in 4" :key="level" class="strength-level" :class="{
        'weak': strength >= 1 && level === 1,
        'medium': strength >= 2 && level <= 2,
        'strong': strength >= 3 && level <= 3,
        'very-strong': strength >= 4 && level <= 4,
        'active': level <= strength
      }"></div>
    </div>
    <div class="strength-text" :class="strengthClass">
      {{ strengthText }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, reactive } from 'vue'
import { useI18n } from 'vue-i18n'

const props = defineProps({
  password: {
    type: String,
    default: ''
  }
})

const strength = ref(0)
const { locale, t } = useI18n()
const strengthTexts = reactive([
  '',
  t('login.pwdStrength.level1'),
  t('login.pwdStrength.level2'),
  t('login.pwdStrength.level3'),
  t('login.pwdStrength.level4')
])
watch(locale, () => {
  strengthTexts[1] = t('login.pwdStrength.level1')
  strengthTexts[2] = t('login.pwdStrength.level2')
  strengthTexts[3] = t('login.pwdStrength.level3')
  strengthTexts[4] = t('login.pwdStrength.level4')
})

const strengthClass = computed(() => {
  return [
    'strength-text',
    {
      'weak': strength.value === 1,
      'medium': strength.value === 2,
      'strong': strength.value === 3,
      'very-strong': strength.value === 4
    }
  ]
})

const strengthText = computed(() => {
  return strengthTexts[strength.value]
})

const checkStrength = (password) => {
  let score = 0

  // 空密码
  if (!password) {
    strength.value = 0
    return
  }

  // 长度评分
  if (password.length > 0) score += 1
  if (password.length >= 8) score += 1
  if (password.length >= 12) score += 1

  // 包含小写字母
  if (/[a-z]/.test(password)) score += 1

  // 包含大写字母
  if (/[A-Z]/.test(password)) score += 1

  // 包含数字
  if (/\d/.test(password)) score += 1

  // 包含特殊字符
  if (/[^a-zA-Z0-9]/.test(password)) score += 1

  // 根据总评分确定强度等级
  if (score <= 2) {
    strength.value = 1 // 弱
  } else if (score <= 4) {
    strength.value = 2 // 中等
  } else if (score <= 6) {
    strength.value = 3 // 强
  } else {
    strength.value = 4 // 非常强
  }
}

// 监听 password 变化
watch(() => props.password, (newVal) => {
  checkStrength(newVal)
}, { immediate: true })
</script>

<style scoped>
.password-strength-bar {
  width: 100%;
}

.strength-meter {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  height: 6px;
}

.strength-level {
  flex: 1;
  background-color: #e0e0e0;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.strength-level.active {
  background-color: #ff5722;
}

.strength-level.weak {
  background-color: #ff5722;
}

.strength-level.medium {
  background-color: #ff9800;
}

.strength-level.strong {
  background-color: #4caf50;
}

.strength-level.very-strong {
  background-color: #2196f3;
}

.strength-text {
  font-size: 14px;
  text-align: right;
  color: #757575;
}

.strength-text.weak {
  color: #ff5722;
}

.strength-text.medium {
  color: #ff9800;
}

.strength-text.strong {
  color: #4caf50;
}

.strength-text.very-strong {
  color: #2196f3;
}
</style>
